<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>⌚⏰🕰 Clock</title>

    <!-- Bootstrap core CSS -->
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />

    <!-- Custom styles for this template -->
    <link href="lesson_01.css" rel="stylesheet" />
  </head>

  <body>
    <main role="main">
      <section class="jumbotron text-center">
        <div class="container">
          <h1>⌚ 电子钟</h1>
          <p class="lead text-muted">
            取电脑当前时间的一个电子钟。<br />使用了 Bootstrap4、Html5、CSS3 及
            Vue.js 技术。
          </p>
          <p>
            <a href="#" class="btn btn-primary my-2">斜杠阿峰</a>
          </p>
        </div>
      </section>

      <div class="album py-5 bg-light" id="app">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="card mb-4 shadow-sm">
                <!-- 钟 -->
                <div id="clock">
                  <!-- 表盘中心 -->
                  <span
                    id="center"
                    :style="{
                      width: center.w + 'px', 
                      height: center.h + 'px', 
                      left: center.x - center.w / 2 + 'px',
                      top: center.y - center.h / 2 + 'px', 
                      'border-radius': center.r + 'px'}"
                  ></span>
                </div>

                <div class="card-body">
                  <p class="card-text">
                    Vue.js 时钟
                  </p>
                  <div
                    class="d-flex justify-content-between align-items-center"
                  >
                    <div class="btn-group"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="text-muted">
      <div class="container py-4">
        <p class="float-right">
          <a href="#">⬆</a>
        </p>
        <p>
          祝您玩的愉快!
        </p>
        <p>
          www.fongzz.com
        </p>
      </div>
    </footer>

    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
      integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
      integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
      crossorigin="anonymous"
    ></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="lesson_01.js"></script>
  </body>
</html>
